<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <img src="images/k70-redmi.jpg" alt="" width="1226">
</p>
<p>
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
</p>

<script>
    // 创建容器存储图片资源
    const imgs = ['images/k70-redmi.jpg', 'images/su7.jpg', 'images/tv.jpg', 'images/xianshiqi.jpg', 'images/xiyiji.jpg']
    let pre_btn = document.querySelector('#pre')
    let next_btn = document.querySelector('#next')

    //  公共索引   获取数组中的资源
    let index = 0
    // 图片节点对象
    let img = document.getElementsByTagName('img')[0]
    // 上一张 单击事件
    pre_btn.onclick = function () {
        // 改变索引
        index--
        if (index < 0) {
            index = imgs.length - 1
        }
        // 替换img节点中的src属性值
        img.src = imgs[index]

    }
    // 下一张 单击事件
    next_btn.onclick = function () {
        index++
        if (index > imgs.length - 1) {
            index = 0
        }
        // 替换img节点中的src属性值
        img.src = imgs[index]
    }

</script>
</body>
</html>
